<template>
  <g
    class="gantt-elastic__chart-row-bar-wrapper gantt-elastic__chart-row-task-wrapper"
    :style="{
      ...root.style['chart-row-bar-wrapper'],
      ...root.style['chart-row-task-wrapper'],
      ...task.style['chart-row-bar-wrapper'],
    }"
  >
    <foreignObject
      class="gantt-elastic__chart-expander gantt-elastic__chart-expander--task"
      :style="{
        ...root.style['chart-expander'],
        ...root.style['chart-expander--task'],
        ...task.style['chart-expander']
      }"
      :x="task.x - root.state.options.chart.expander.offset - root.state.options.chart.expander.size"
      :y="task.y + (root.state.options.row.height - root.state.options.chart.expander.size) / 2"
      :width="root.state.options.chart.expander.size"
      :height="root.state.options.chart.expander.size"
      v-if="displayExpander"
    >
      <expander :tasks="[task]" :options="root.state.options.chart.expander" type="chart"></expander>
    </foreignObject>
    <svg
      class="gantt-elastic__chart-row-bar gantt-elastic__chart-row-task"
      :style="{ ...root.style['chart-row-bar'], ...root.style['chart-row-task'], ...task.style['chart-row-bar'] }"
      :x="task.x"
      :y="task.y"
      :width="task.width"
      :height="task.height"
      :viewBox="`0 0 ${task.width} ${task.height}`"
      @click="emitEvent('click', $event)"
      @mouseenter="emitEvent('mouseenter', $event)"
      @mouseover="emitEvent('mouseover', $event)"
      @mouseout="emitEvent('mouseout', $event)"
      @mousemove="emitEvent('mousemove', $event)"
      @mousedown="emitEvent('mousedown', $event)"
      @mouseup="emitEvent('mouseup', $event)"
      @mousewheel="emitEvent('mousewheel', $event)"
      @touchstart="emitEvent('touchstart', $event)"
      @touchmove="emitEvent('touchmove', $event)"
      @touchend="emitEvent('touchend', $event)"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <clipPath :id="clipPathId">
          <polygon :points="getPoints" />
        </clipPath>
      </defs>
      <!-- <polygon
        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-task-polygon"
        :style="{
          ...root.style['chart-row-bar-polygon'],
          ...root.style['chart-row-task-polygon'],
          ...task.style['base'],
          ...task.style['chart-row-bar-polygon']
        }"
  
        :points="getPoints"
      /> -->
      <path
        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-task-polygon"
        :style="{
          ...root.style['chart-row-bar-polygon'],
          ...root.style['chart-row-task-polygon'],
          ...task.style['base'],
          ...task.style['chart-row-bar-polygon']
        }"
  
        :d="getRoundPoints"
      />
      <LightColorProgressBar :task="task" :clip-path="'url(#' + clipPathId + ')'" />
      <!-- <polygon
        class="gantt-elastic__chart-row-bar-polygon gantt-elastic__chart-row-task-polygon"
        :style="{
          ...root.style['chart-row-bar-polygon'],
          ...root.style['chart-row-task-polygon'],
          ...checkBorderColor,
          ...task.style['chart-row-bar-polygon'],
        }"
        :points="getHeaderPoints"
      /> -->
    </svg>
    <left-text :offsetX="getBorderWidth" :task="task" v-if="!root.state.options.taskList.display"></left-text>
    <!-- <right-text :task="task" v-if="root.state.options.chart.text.display"></right-text> -->
    <right-text :task="task" v-if="!root.state.options.taskList.display"></right-text>
    <HoverStep :task="task" />
  </g>
</template> 
 
<script>
// import ChartText from '../Text.vue';
import LeftText from '../LeftText.vue';
import RightText from '../RightText.vue';

// import ProgressBar from '../ProgressBar.vue';
import LightColorProgressBar from '../LightColorProgressBar';
import HoverStep from '../HoverStep';
import Expander from '../../Expander.vue';
import taskMixin from './Task.mixin.js';
export default {
  name: 'TaskWithBothText',
  components: {
    // ChartText,
    // ProgressBar,
    Expander,
    LeftText,
    RightText,
    LightColorProgressBar,
    HoverStep
  },
  inject: ['root'],
  props: ['task'],
  mixins: [taskMixin],
  data() {
    return {};
  },
  computed: {
    /**
     * Get clip path id
     *
     * @returns {string}
     */
    clipPathId() {
      return 'gantt-elastic__task-clip-path-' + this.task.id;
    },

    /**
     * Get points
     *
     * @returns {string}
     */
    getPoints() {
      const task = this.task;
      return `0,0 ${task.width},0 ${task.width},${task.height} 0,${task.height}`;
    },

    getRoundPoints(){
      const {width,height}=this.task;
      const corner = height / 6;
      // const smallCorner = task.height / 8;
      const p1 = `M${corner},0 h${width-corner*2} a${corner},${corner} 0 0 1 ${corner},${corner} `
      const p2 = `v${height-corner*2} a${corner},${corner} 0 0 1 ${-corner},${corner}`
      const p3 = `h${-width+corner*2} a${corner},${corner} 0 0 1 ${-corner},${-corner}`
      const p4 = `v${-height+corner*2} a${corner},${corner} 0 0 1 ${corner},${-corner}`

     return `${p1} ${p2} ${p3} ${p4} z`;
    },

    checkBorderColor() {
      const { style: { border: taskBorder = {} } = {} } = this.task;
      const {
        options: {
          row: { border: originBorder }
        }
      } = this.root.state;

      const { fill, stroke } = { ...originBorder, ...taskBorder };

      return { fill, stroke };
    },

    getBorderWidth() {
      const { style: { border: taskBorder = {} } = {} } = this.task;
      const {
        options: {
          row: { border: originBorder }
        }
      } = this.root.state;
      const borderWidth = taskBorder.width ? taskBorder.width : originBorder.width;
      // console.log('taskBorder =', taskBorder);
      // const {options:{row:{border:{width:borderWidth}}}} = this.root.props
      const width = this.task.width > borderWidth ? borderWidth : 0;
      return width;
    },

    getHeaderPoints() {
      const width = this.getBorderWidth;
      console.log('width =',width)
      return `0,0 ${width},0 ${width},${this.task.height} 0,${this.task.height}`;
    }
  }
};
</script>
